<template>
  <div ref="Ukiyoe" style="width: 130%; height: 120%" />
</template>

<script>
import * as echarts from "echarts";
import * as jquery from "jquery";
import "echarts-gl";
export default {
  mounted() {
    var myChart = echarts.init(this.$refs.Ukiyoe);
    var option;
    jquery
      .getScript(
        "https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js"
        //    './buildGrid.js'
      )
      .done(function () {
        var noise1 = new SimplexNoise(Math.random);
        var noise2 = new SimplexNoise(Math.random);
        var noise3 = new SimplexNoise(Math.random);
        var noise4 = new SimplexNoise(Math.random);
        var noise5 = new SimplexNoise(Math.random);
        var noise6 = new SimplexNoise(Math.random);
        function generateData() {
          var data = [];
          for (var i = 0; i <= 50; i++) {
            for (var j = 0; j <= 50; j++) {
              var dx = noise1.noise2D(i / 30, j / 30);
              var dy = noise2.noise2D(i / 30, j / 30);
              var du = noise3.noise2D(i / 30, j / 30);
              var di = noise4.noise2D(i / 30, j / 30);
              var doo = noise5.noise2D(i / 30, j / 30);
              var dp = noise6.noise2D(i / 30, j / 30);
              var mag = Math.sqrt(
                dx * dx + dy * dy + du * du + di * di + doo * doo + dp * dp
              );
              valMax = Math.max(valMax, mag);
              valMin = Math.min(valMin, mag);
              data.push([i, j, dx, dy, mag, du, di, doo, dp]);
            }
          }
          return data;
        }
        var valMin = Infinity;
        var valMax = -Infinity;
        var data = generateData();
        myChart.setOption({
          visualMap: {
            show: false,
            min: valMin,
            max: valMax,
            dimension: 10,
            gradientColor:{
                0:"#313695",
                1:"#4575b4",
                2:"#74add1",
                3:"#abd9e9",
                4:"#e0f3f8",
            },
            backgroundColor: '#FF95CA',
            inRange: {
              color: [
                // "#313695",
                // "#4575b4",
                // "#74add1",
                // "#abd9e9",
                // "#e0f3f8",
                // "#ffffbf",
                // "#fee090",
                // "#fdae61",
                // "#f46d43",
                // "#d73027",
                // "#a50026",
                // "#600030",
                "#9F35FF",
                "#BE77FF",
                "#FF79BC",
                "#FFC1E0",
                "#FF8EFF",
                "#FFB5B5",
                "#DCB5FF",
              ],
            },
          },
          xAxis: {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
          },
          gradientColor: {
            0: "#FF2D2D",
            1: "#006000",
            2: "#AAAAFF",
          },
          yAxis: {
            type: "value",
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,0.2)",
              },
            },
          },
          textStyle: {
            color: "transparent",
          },
          series: [
            {
              type: "flowGL",
              data: data,
              particleDensity: 200,
              particleSize: 2,
              itemStyle: {
                opacity: 0.5,
              },
            },
            {
              type: "custom",
              data: data,
              encode: {
                x: 0,
                y: 0,
              },
              renderItem: function (params, api) {
                var x = api.value(0),
                  y = api.value(1),
                  dx = api.value(2),
                  dy = api.value(3);
                var start = api.coord([x - dx / 2, y - dy / 2]);
                var end = api.coord([x + dx / 2, y + dy / 2]);
                return {
                  type: "line",
                  shape: {
                    x1: start[0],
                    y1: start[1],
                    x2: end[0],
                    y2: end[1],
                  },
                };
              },
            },
          ],
        });
      });

    option && myChart.setOption(option);
  },
};
</script>

<style></style>
